<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./index2.css" />
  <title>flex布局--写代码的浩</title>
</head>
<body>
  <details open data-flex="anim">
    <summary>Flex容器的属性Demo</summary>
    <h2>flex-wrap: 项目是否排在一行上。超过一行才会生效</h2>
    <div class="flex-demo">
      <div>
        <h2>flex-wrap: nowrap（默认）</h2>
        <div class="flex-container" style="flex-wrap: nowrap">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
        </div>
      </div>
      <div>
        <h2>flex-wrap: wrap</h2>
        <div class="flex-container" style="flex-wrap: wrap;height: 140px;">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
        </div>
      </div>
      <div>
        <h2>flex-wrap: wrap-reverse</h2>
        <div class="flex-container" style="flex-wrap: wrap-reverse;height:140px">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>justify-content: 项目在主轴上的对齐方式。不足一行才会生效</h2>
    <div class="flex-demo">
      <div>
        <h2>justify-content: flex-start（默认）</h2>
        <div class="flex-container" style="justify-content: flex-start">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: flex-end</h2>
        <div class="flex-container" style="justify-content: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: center</h2>
        <div class="flex-container" style="justify-content: center">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-between</h2>
        <div class="flex-container" style="justify-content: space-between">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-around</h2>
        <div class="flex-container" style="justify-content: space-around">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
      <div>
        <h2>justify-content: space-evenly</h2>
        <div class="flex-container" style="justify-content: space-evenly">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>align-content: 定义了多根轴线的对齐方式。一根轴线不生效。flex-wrap不为nowrap才会生效</h2>
    <div class="flex-demo" data-flex="alignContent">
      <div>
        <h2>align-content: flex-start</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: flex-start">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: flex-end</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: flex-end">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: center</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: center">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: space-between</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: space-between">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: space-around</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: space-around">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
      <div>
        <h2>align-content: stretch（默认）</h2>
        <div class="flex-container" style="flex-wrap: wrap;align-content: stretch">
          <div class="flex-child">1</div>
          <div class="flex-child">2</div>
          <div class="flex-child">3</div>
          <div class="flex-child">4</div>
          <div class="flex-child">5</div>
          <div class="flex-child">6</div>
          <div class="flex-child">7</div>
        </div>
      </div>
    </div>
  </details>
  
  <br /><br />
  <details open>
    <summary>Flex项目的属性Demo</summary>
    <h2>flex-grow: 项目的放大比例，默认为0，0表示不缩放</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-grow</h2>
        <div class="flex-container" data-flex="grow">
          <div class="flex-child" style="flex-grow: 0">1  grow:0</div>
          <div class="flex-child" style="flex-grow: 2">2  grow:2</div>
          <div class="flex-child" style="flex-grow: 6">3  grow:6</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>flex-shrink: 项目的缩小比例，默认为0，0表示不缩放</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-shrink</h2>
        <div class="flex-container" data-flex="shrink">
          <div class="flex-child" style="flex-shrink: 0">1  shrink:0</div>
          <div class="flex-child" style="flex-shrink: 2">2  shrink:2</div>
          <div class="flex-child" style="flex-shrink: 6">3  shrink:6</div>
        </div>
      </div>
    </div>

    <br /><br />
    <h2>flex-basis: 在分配多余空间之前，项目占据的主轴空间</h2>
    <div class="flex-demo flex-item-demo">
      <div>
        <h2>flex-basis</h2>
        <div class="flex-container" data-flex="basis" style="width: 200px">
          <div class="flex-child" style="flex-basis: 80px">1  basis:80px</div>
          <div class="flex-child" style="flex-basis: 140px">2  basis:140px</div>
          <div class="flex-child" style="flex-basis: 180px">3  basis:180px</div>
        </div>
      </div>
    </div>
  </details>
  <script src="./index.js"></script>
</body>
</html>
